<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
	<!--.mui-progressbar 有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；
		使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。-->
	<div id="demo1" class="mui-progressbar">
		<span></span>
	</div>
    
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    	//初始化
//  	mui(demo1).progressbar({progress: 20}).show();		//数字就传入完成度。
    	
//  	progressbar初始化逻辑：
//		检查当前容器(container控件)自身是否包含.mui-progressbar类：
//		当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；
//		否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；
//		若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；
    	//更改显示进度条
    	mui(demo1).progressbar().setProgress(50);
//  	关闭进度条
    	mui(demo1).progressbar().hide();
    </script>
</body>
</html>
